<template>
  <div class="calendar">
    <NSpace align="end">
      <NButton
        type="primary"
        style="width: 115px;margin-bottom: 15px;"
        @click="handleAdd"
      >
        新增
      </NButton>
    </NSpace>
    <NCalendar
      v-model:value="value"
      #="{ year, month, date }"
      @panel-change="handlePanelChange"
      @update:value="handleUpdateValue"
    >
      <div class="singleSchedule" v-if="schedules[`${year}-${month}-${date}`]">
        <ul style="list-style-type: none;">
          <li
            v-for="item in schedules[`${year}-${month}-${date}`].list"
            :key="item.id"
            style="margin-bottom: 10px;"
            @click.stop="handleClick(item.id)"
          >
            {{item.scheduleName}} {{ item.startScheduleDate.split(' ')[1] }}-{{ item.endScheduleDate.split(' ')[1] }}
          </li>
        </ul>
        <!-- {{ year }}-{{ month }}-{{ date }} -->
      </div>
    </NCalendar>
  </div>
</template>
<script setup lang="ts">
  import {
    NSpace,
    NButton,
    NCalendar,
    useMessage,
  } from 'naive-ui'
  import dayjs from 'dayjs';
  import { ref, reactive, onMounted, watch } from 'vue';
  import { isYesterday, addDays } from 'date-fns/esm';
  import { sendRequest } from '@/utils/api'
  import type { HttpResponse, HttpResponsePagination } from '@/utils/http'
  import { useRoute, useRouter } from 'vue-router'
  const router = useRouter()
  const route = useRoute()

  const message = useMessage();

  const value = ref(addDays(Date.now(), 0).valueOf());

  const form = reactive({
    scheduleMonth: dayjs().format('YYYY-M'),
    leagueId: null,
    scheduleDay: null,
    volunteerId: null
  })

  const scheduleDay = ref(dayjs().format('YYYY-MM-DD'));

  const list = ref<any>([]);
  const schedules = ref<any>({});

  onMounted(()=>{
    onLoadData();
  })

  const onLoadData = async() => {
    const [error, res] = await sendRequest<HttpResponsePagination<preselectionModel>>({
      module: 'volunteer',
      api: 'volunteerScheduleList',
      override: {
        params: {
          scheduleMonth: form.scheduleMonth,
          leagueId: form.leagueId,
          scheduleDay: form.scheduleDay,
          volunteerId: form.volunteerId
        }
      }
    })
    if (error) return message.error(error.message)
    if (res.code == 0) {
      let data = res.data;
      let obj = {};
      data.forEach(item=>{
        let date = item.scheduleDate.split('-');
        obj[`${date[0]}-${Number(date[1])}-${Number(date[2])}`] = {
          list: item.scheduleInfos
        }
      });
      schedules.value = obj;
      console.log('scheduleInfos', obj)
      list.value = data;
    }
  }

  const handlePanelChange = (info:any) => {
    let {
      year,
      month,
    } = info;
    form.scheduleMonth = `${year}-${month}`;
    scheduleDay.value = '';
    onLoadData();
  }

  const handleClick = (id: number | string) => {
    router.push({ name: 'VolunteerWorkScheduleEdit', params: { id: id } })
  }
  const handleAdd = () => {
    if (!scheduleDay.value) {
      message.error('请选择排班日期');
      return;
    }
    router.push({ name: 'VolunteerWorkScheduleAdd', query: { scheduleDay: scheduleDay.value} })
  }
  
  const handleUpdateValue = (_: number,{ year, month, date }: { year: number; month: number; date: number }) => {
    scheduleDay.value = `${year}-${month}-${date}`;
  }
  
watch(
  () => route,
  () => {
    if (
      route.path == '/volunteer/work/schedule/index'
    ) {
      onLoadData();
    }
  },
  { deep: true, immediate: true }
)
</script>
<style>

.n-calendar-cell {
  height: 150px !important;
}
.n-calendar .n-calendar-cell.n-calendar-cell--selected .n-calendar-cell__bar {
  display: none;
}
.n-calendar .n-calendar-cell.n-calendar-cell--selected {
  border: 1px solid var(--n-bar-color);
}
</style>
<style lang="scss" scoped>
  .calendar {
    padding: 15px;
    background: #ffffff;
    height: 900px;
    overflow-y: scroll;
  }
  .singleSchedule {
    height: 115px;
    overflow-y: scroll;
    width: 100%; /* 设置容器宽度 */
    overflow: auto; /* 显示滚动条，根据内容决定是否显示 */

    /* 隐藏默认的滚动条样式 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
  .singleSchedule::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }
</style>